<template>
    <div id="AddNews">
        <!--        //进行双向绑定，既可以用来获取编辑器中的内容，又可以将内容写入编辑器-->
        <!--        //编辑器中的内容发生变化时触发的事件-->
        <el-form inline :model="newsData" :rules="rules" ref="newsDataForm" class="demo-ruleForm">
            <div style="margin-bottom: 10px">
                <el-button @click="$router.push('/FamilyOrigin')" icon="el-icon-back">返回上一页</el-button>
            </div>
            <div style="display: flex">
                <el-form-item label="标题：" prop="title">
                    <el-input
                            style="width: 320px"
                            placeholder="请输入内容"
                            v-model="newsData.title"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="发布人：" prop="publisher">
                    <el-input
                            style="width: 220px"
                            placeholder="请输入内容"
                            v-model="newsData.publisher"
                            clearable>
                    </el-input>
                </el-form-item>
                        {{newsData.releaseDateTime}}
                <el-form-item label="发布时间：" prop="releaseDateTime">
                    <el-date-picker
                            v-model="newsData.releaseDateTime"
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="管理员id：" prop="adminId" v-show="false">
                    <el-input
                            style="width: 100px"
                            placeholder="请输入内容"
                            v-model="newsData.adminId"
                            clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" @click="resetForm()" icon="el-icon-refresh">重置</el-button>
                    <el-button type="primary" @click="intoNews" icon="el-icon-finished">提交</el-button>
                </el-form-item>
            </div>
            <mavon-editor
                    v-model="newsData.content"
                    ref="md"
                    @change="change"
                    style="min-height: 600px"
            />
        </el-form>
    </div>
</template>

<script>
    import {mavonEditor} from 'mavon-editor'     //引入mavon-editor组件
    import 'mavon-editor/dist/css/index.css'       //引入组件的样式
    export default {
        name: "AddNews",
        // 注册
        components: {
            mavonEditor,
        },
        data() {
            return {
                newsData: {
                    adminId: this.$route.query.id,
                    title: '',
                    publisher: '',
                    releaseDateTime: '',
                    content: '',
                },
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                        {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
                    ],
                    publisher: [
                        {required: true, message: '请输入发布人', trigger: 'blur'},
                    ],
                    releaseDateTime: [
                        {required: true, message: '请选择日期和时间', trigger: 'blur'}
                    ],
                    content: [
                        {required: true, message: '请输入正文内容', trigger: 'blur'},
                    ]
                },
                redirect: this.$route.query.redirect,
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value2: '',
                aa: '',
                bb: '',
                content: '', // 输入的markdown
                html: '',    // 及时转的html
                toolbars: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    readmodel: true, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: true, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: true, // 预览],
                }
            }
        },
        created() {

        },

        methods: {
            //根据管理员id添加资讯
            intoNews() {
                // 前端表单验证
                this.$refs.newsDataForm.validate((valid) => {
                    if (valid) {
                        // 表单验证通过后，调用后端接口
                        this.$axios.post('/api/news/intonews', this.newsData).then((res) => {
                            if (res.data.status === 1) {
                                this.$message.success(res.data.msg);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        this.$message.error('请填写完整内容');
                        return false;
                    }
                })
            },
            // 所有操作都会被解析重新渲染
            change(value, render) {        //value为编辑器中的实际内容，即markdown的内容，render为被解析成的html的内容
                this.html = render;
            },
            resetForm() {
                this.newsData = {};
            }

        },
        mounted() {

        }
    }
</script>

<style lang="scss">
    #AddNews {
        .el-form-item__label {
            padding: 0 !important;
            font-size: 16px !important;
            font-weight: bold;
        }

        .el-form--inline .el-form-item {
            margin-right: 25px !important;
        }
    }
</style>